<template>
  <div class="main">
    <el-card>
      <div slot="header">
        <span>新增新闻 / 查找新闻</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="3" :offset="4" class="title">
          <div>新闻标题:</div>
        </el-col>
        <el-col :span="6" style="margin-left: -30px">
          <el-input v-model="searchParams.title" placeholder="请输入新闻标题" />
        </el-col>
        <el-col :span="3" class="title">
          <div>新闻作者:</div>
        </el-col>
        <el-col :span="6" style="margin-left: -30px">
          <el-input v-model="searchParams.author" placeholder="请输入新闻作者" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="6" :offset="5">
          <el-button type="primary" @click="addNews">新增新闻</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="clear">clear</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search">查 询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">
        <span>新闻列表</span>
      </div>
      <el-table :data="newsList" border stripe>
        <el-table-column type="index" label="#" width="50px" />
        <el-table-column prop="addTime" label="添加日期" width="160px" />
        <el-table-column prop="author" label="作者" width="130px" />
        <el-table-column prop="title" label="新闻标题" width="150px" />
        <el-table-column prop="desc" label="概要" width="150px" />
        <el-table-column prop="viewCount" label="阅读数" width="70px" />
        <el-table-column prop="zanCount" label="获赞数" width="70px" />
        <el-table-column prop="type" :formatter="typeFormatter" label="文本类型" width="110px" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row.id)"
            >Edit</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import {
  getNewsList,
  // getNewsDetail,
  delNews
  // updateNews,
  // saveNews
} from '@/api/news/news'
export default {
  data() {
    return {
      newsList: [],
      searchParams: {
        title: '',
        author: ''
      },

      // page setting
      page: {
        current: 1,
        limit: 10,
        total: 0
      }
    }
  },
  created() {
    this.setNewsList()
  },
  methods: {
    setNewsList() {
      getNewsList({
        start: this.page.current,
        limit: this.page.limit
      }).then(resp => {
        this.newsList = resp.data.list
        this.page.total = resp.data.totalRow
      })
    },
    addNews() {
      this.$router.push({ name: 'newsDetail' })
    },
    clear() {
      this.searchParams = this.$options.data().searchParams
    },
    search() {
      const paramsTmp = _.pickBy(this.searchParams, item => item)

      getNewsList({
        start: this.page.current,
        limit: this.page.limit,
        ...paramsTmp
      }).then(resp => {
        this.newsList = resp.data.list
        this.page.total = resp.data.totalRow
      })
    },
    typeFormatter(row) {
      if (row.type === '0') {
        return '富文本'
      }

      return 'markdown'
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.page.current = 1
      this.setNewsList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.setNewsList()
    },
    handleDelete(id) {
      delNews({
        id
      }).then(resp => {
        if (resp.code === 'success') {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }

        this.setNewsList()
      })
    },
    handleEdit(id) {
      this.$router.push({ name: 'newsDetail', params: { id: id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 1100px;
  margin: 0 auto;

  .title {
    margin-top: 10px;
    margin-right: -30px;
  }
}
</style>
